<template>
    <div>
        <el-table :data="parkingsList" style="width: 100%">
            <el-table-column label="图片">
                <img
                    src="./images/a665bda60acd4660de3b37ca3e8c5ba9.jpg"
                    alt=""
                />
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="number" label="车位号"> </el-table-column>
            <el-table-column label="出租方" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.lessorsId.account }}</p>
                        <p>信誉: {{ scope.row.lessorsId.credits }}</p>
                        <p>电话: {{ scope.row.lessorsId.phone }}</p>
                        <p>发布时间: {{ scope.row.time }}</p>
                        <p>出租周期: {{ scope.row.cycle }}</p>
                        <p>产权信息: {{ scope.row.property }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.lessorsId.account
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row._id)"
                        >去购买</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="[2, 3, 4, 5]"
                    :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="nums"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapActions: parkingMapActions,
    mapState: parkingMapState,
} = createNamespacedHelpers("parkingList"); //主仓库引入子仓库的名称,

export default {
    props: ["id"],
    data() {
        return {
            currentPage1: 1,
            pageSize: 2,
            currentPage: 1,
            nums:1,
        };
    },
   async mounted() {
        const { data } = await this.getAllParkings({
            pageSize: this.pageSize,
            currentPage: this.currentPage,
        });
        // console.log("挂载完成",data);
        this.nums = data.nums;
        
    },
    methods: {
        //翻页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getAllParkings({
                pageSize: this.pageSize,
                currentPage: this.currentPage,
            });
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            // console.log(`当前页: ${val}`);
            this.getAllParkings({
                pageSize: this.pageSize,
                currentPage: this.currentPage,
            });
        },
        ...parkingMapActions(["getAllParkings"]),
        handleEdit(val) {
            console.log(val);
            this.$router.push("/system/pay/" + val + "," + this.id);
        },
    },
    computed: {
        ...parkingMapState(["parkingsList"]),
    },
};
</script>

<style>
</style>